import React, { Component } from 'react'
import { Card, Form, Input, Button, Checkbox } from 'antd'
// import { Form, Input, Button, Checkbox } from 'antd';
import { UserOutlined, LockOutlined } from '@ant-design/icons'
import './index.less'
import svg from '../../assert/images/u236.svg'
import { connect } from 'react-redux'
import { loginAsync } from '../../redux/actions/user'
import { Redirect } from 'react-router-dom'
// import store from '../../redux/store'
// 将当前组件连接到redux 的 store
class Login extends Component {
  // 表单验证成功会触发成功
  onFinish = (values) => {
    console.log('Received values of form: ', values)
    this.props.login(values)
    // 如果这个改变了，它会重新的渲染组件 ，检查 props.里面的token
  }
  NormalLoginForm = () => {
    return (
      <Form
        name="normal_login"
        className="login-form"
        initialValues={{ remember: true }}
        onFinish={this.onFinish}
      >
        <Form.Item
          name="username"
          rules={[{ required: true, message: '请输入用户名' }]}
        >
          <Input prefix={<UserOutlined className="site-form-item-icon" />} placeholder="账号" />
        </Form.Item>
        <Form.Item
          name="password"
          rules={[{ required: true, message: '请输入密码' }]}
        >
          <Input
            prefix={<LockOutlined className="site-form-item-icon" />}
            type="password"
            placeholder="密码"
          />
        </Form.Item>
        <Form.Item>
          <Form.Item name="remember" valuePropName="checked" noStyle>
            <Checkbox>给我记住了</Checkbox>
          </Form.Item>
          <a className="login-form-forgot" href="/404">
            搞忘密码了
          </a>
        </Form.Item>
  
        <Form.Item>
          <Button type="primary" htmlType="submit" className="login-form-button">
            登录
          </Button>
          &nbsp;&nbsp;Or&nbsp;&nbsp;<a href="/404">注册</a>
        </Form.Item>
      </Form>
    );
  }

  render() {
    console.log('我是props', this.props.token)
    return (
      this.props.token ? // 判断，在属性中是否存在用户登陆成功的 token 数据
      /*
      * 为什么会跳转页面？
        当登录事件被触发 login 这个方法 触发 loginAsync 如果 result 里面有数据则会触发 
        dispatch action 触发 reducer 方法的调用 合并新的状态数据（用户头像 token username）
        此时状态更新 会导致 connect的第一参数 mapstateToprops 函数重新调用 
      */
      <Redirect to="/" />
      :
      <div>
        <div style={{width:'100%',height:'100vh',backgroundColor:'#666ee8',position:'relative'}}>
          <Card style={{width:900,height:500,borderRadius:'15px',position:'absolute',top:0,left:0,right:0,bottom:0,margin:'auto',}}>
            {/* 外层大盒子 */}
            <div style={{display:'flex',justifyContent:"space-between"}}>
              <div>
                <img src={svg} alt="" style={{width:400,height:250,marginTop:'70px'}}/>
              </div>
              <div style={{width:400,marginTop:'60px'}}>
                <p style={{fontSize:'25px',fontWeight:700}}>login🐉诊所系统</p>
                {
                  this.NormalLoginForm()
                }
              </div>
            </div>
          </Card>
        </div>
      </div>
    )
  }
}
export default connect(state => ({
  token: state.user.token
}), {
  login: loginAsync
})(Login)